<template>
	<view>
			<view class="index-ov">
				<!-- 顶部图片 -->
				<view class="top-img">
					<image class="fengrui-img" src="../../static/data/data-top.svg" mode="aspectFill"></image>
				</view>

				<!-- 标题 -->
				<view class="titel-h-w">
					<view class="titel-h">
						{{ posdCenterTitle }}
					</view>
				</view>

				<!-- 时间和装饰品 -->
				<view class="time-view">
					<view class="time-img">
						<image class="fengrui-img" src="../../static/data/time.svg" mode="aspectFit"></image>
					</view>
					<view class="time-font">
						{{ detailData.date }}
					</view>
				</view>

				<!-- 正文内容 -->
				<view class="data-view">
					<mp-html :tag-style="tag_style" :content="contentDate" :container-style="container_style"
						selectable="true"> 内容疯狂加载ing...</mp-html>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<view v-if="about_center.length>0" style="width: 94%;padding-left: 3%;margin-top: 50upx;">
					<ad :unit-id="about_center[0].wx_video" ad-type="video" ad-theme="white"></ad>
				</view>
				<!-- #endif -->

				<!-- 猜你想搜 -->
				<view class="titel-felx">
					<view class="time-img">
						<image class="fengrui-img" src="../../static/my/star.svg" mode=""></image>
					</view>
					<view class="titel-h-go">
						相关文章
					</view>
				</view>
				<!-- 列表 -->
				<block>
					<view class="list-li" v-for="(item ,index) in posTagsList" :key="index" @click="posTap(item)">
						<view class="list-img">
							<image class="fengrui-img" :src="item.thumbnailurl" mode="aspectFill"></image>
						</view>
						<view class="list-li-left">
							<view class="list-li-left-h">
								{{ item.title.rendered }}
							</view>
							<view class="list-li-left-describe">
								<view class="">推选阅读</view>
								<view>{{ item.date }}</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 其他问题 -->
				<block v-if="offcomment">
					<view class="titel-felx">
						<view class="time-img">
							<image class="fengrui-img" src="../../static/data/comment.svg" mode=""></image>
						</view>
						<view class="titel-h-go">
							其他问题
						</view>
					</view>

					<view class="que-lisr-v" v-for="(item ,index) in XuMessageList" :key="index">
						<view class="que-user" v-if="item.parent == '0'">
							问
						</view>
						<view class="que-user que-user-d" v-else>
							答
						</view>
						<view class="que-description">
							<view class="que-name">
								{{ item.author_name }}
								<text class="que-text" v-for="(userItem,i) in XuMessageList" :key="i"
									v-if="userItem.id == item.parent">
									回答： {{userItem.author_name}}
								</text>
							</view>
							<view class="que-wen">
								<rich-text :nodes="item.content.rendered"></rich-text>
							</view>
							<view class="que-time">
								{{ item.date }}
							</view>
						</view>
					</view>
				</block>

				<!-- 支撑顶部高度 -->
				<view style="height: 140upx;"></view>
				<!-- 文章列表没有数据 -->
				<view class="no-list-data" v-if="no_list_data">
					--我的底线就到这里了--
				</view>

				<!-- 提问转发 -->
				<view class="cove-bom">
					<view class="cover-list-view">
						<view class="cover-quest" @tap="questionsTap()" v-if="offcomment">
							提交问题
						</view>

						<button class="cover-list-btn" open-type="contact" :send-message-title="posdCenterTitle"
							:send-message-path="posUrl" show-message-card="true">
							<view class="cover-list-icon">
								<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
								</image>
							</view>
							<!-- <view class="cover-list-font">咨询客服</view> -->
						</button>

						<view
							v-if="detailData.fr_down_title != '' || detailData.account_key != ''  ||  detailData.fr_down_url != '' || detailData.fr_down_file != ''">
							<view class="cover-list-icon" @tap="downloadTap()">
								<image class="fengrui-img" src="../../static/data/down.svg" mode="aspectFit">
								</image>
							</view>
							<!-- <view class="cover-list-font">资源下载</view> -->
						</view>

						<button class="cover-list-btn" open-type="share">
							<view class="cover-list-icon" style="height: 58upx;">
								<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
								</image>
							</view>
							<!-- <view class="cover-list-font">分享</view> -->
						</button>

					</view>
				</view>
			</view>
		<!-- 加载动画 -->
		<view v-if="is_show_login" class="data-login-flex">
			<view class="data-login">
				<image class="fengrui-img" src="../../static/data/loading.gif" mode=""></image>
			</view>
		</view>

	</view>
</template>
<script>
	// 引入域名和自定义php文件
	import {
		API
	} from '@/components/api.js';
	import {
		Getresources
	} from '@/components/api.js';
	import mpHtml from '@/components/mp-html/mp-html';
	let rewardedVideoAd = null;
	export default {
		components: {
			mpHtml
		},
		data() {
			return {
				posdCenterTitle: '数据加载中....',
				detailData: [],
				posID: '',
				posTagsList: [],
				posTag: '',
				// 数据
				about_center: [],
				offcomment: false,
				// 文章没有数据
				no_list_data: false,
				// 检测文章是否需要开启激励视频
				preview: '',
				frDate: '',
				// 评论
				XuMessageList: [],
				page: 1,
				boolShow: false,
				posUrl: '',
				// #ifdef MP-WEIXIN
				account: [],
				// #endif
				animationData: {},
				postID: '',
				contentDate: [],
				is_show_login: true,
				// 文本框解析
				tag_style: {
					h1: 'line-height: 50px;font-size:16px;',
					h2: 'line-height: 50px;font-size:16px',
					h3: 'line-height: 50px;font-size:16px',
					h4: 'line-height: 50px;font-size:16px',
				},
				container_style: 'font-size:15px;overflow-x: hidden;line-height:30px;letter-spacing:1px',

			}
		},
		// 建立动画
		onShow: function() {
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'linear',
			})
			this.animation = animation
		},
		onLoad(posID) {
			// 接受数据
			this.posdCenterID = posID.id;
			
			// 接受数据
			this.posUrl = 'pages/data/data?id=' + posID.id;

			// 请求自定义接口
			this.Getres();

			// 微信分享盆友圈
			//#ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},

		// 监听滑动
		onPageScroll: function(e) {
			// 判断型号 显示不同标题栏高度
			var that = this;

		},

		// 分享好友配置
		onShareAppMessage(res) {
			var that = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: that.detailData.title.rendered,
				imageUrl: that.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			var that = this;
			return {
				title: that.detailData.title.rendered,
				imageUrl: that.detailData.thumbnailurl,
				path: '/pages/data/data?id=' + this.posdCenterID
			}
		},
		// 监听触底----上啦刷新
		onReachBottom() {
			this.page = this.page + 1;
			this.XuMessage();
		},
		methods: {
			// 自定义php接口请求
			Getres: function() {
				var that = this;

				// 请求基本数据
				uni.request({
					url: API + '/wp-json/wp/v2/fengrui',
					success: (res) => {
						// 数据
						that.about_center = res.data;

						// 获取文章数据
						if (that.passwordShow == true) {
							that.loginSucc();
						} else {
							// 自定义php接口请求
							that.posdData()
						}

						// 关闭评论/提交问题
						if (res.data[0].offcomment == '1') {
							that.offcomment = false;
						} else {
							that.offcomment = true;
						}

					}
				});
			},
			// 文章数据
			posdData: function(pass) {
				var that = this;
				uni.request({
					url: API + '/wp-json/wp/v2/posts/' + that.posdCenterID,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							that.detailData = res.data;
							that.posdCenterTitle = res.data.title.rendered;
							that.posTag = res.data.tags[0];
							that.postID = res.data.id;

							// 正则添加class
							that.contentDate = res.data.content.rendered
								.replace(/<h1([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h1')
								.replace(/<h1([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h1')
								.replace(/<h1>/ig, '<h1 class="h1">')

								.replace(/<h2([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h2')
								.replace(/<h2([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h2')
								.replace(/<h2>/ig, '<h2 class="h2">')

								.replace(/<h3([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h3')
								.replace(/<h3([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h3')
								.replace(/<h3>/ig, '<h3 class="h3">')

								.replace(/<h4([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h4')
								.replace(/<h4([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h4')
								.replace(/<h4>/ig, '<h4 class="h4">')

								.replace(/<h5([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h5')
								.replace(/<h5([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h5')
								.replace(/<h5>/ig, '<h5 class="h4">')

								.replace(/<h6([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<h6')
								.replace(/<h6([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<h6')
								.replace(/<h6>/ig, '<h6 class="h6">')

								.replace(/<code([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<code')
								.replace(/<code([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<code')
								.replace(/<code>/ig, '<code class="language-css">')

							// 检测是否有标签和热门文章
							if (res.data.tags == '' || res.data.tags[0] == undefined) {
								console.log('该文章没有设置标签，请注意wordpress后天文章标签设置')
								that.no_list_data = true;
							} else {
								// 热门文章
								uni.request({
									url: API + '/wp-json/wp/v2/posts/?tags=' + that.posTag,
									success: (res) => {
										that.no_list_data = false;
										that.posTagsList = res.data.slice(0, 3);
									}
								});
							};

							// 关闭加载动画
							that.loginSucc();


							// 先检测是有有流量主广告,如果有id执行预加载广告，如果没有阅读全文
							// 随后frDate获取当前时间，存为缓存storage_key + 文章id
							// 判断是否有缓存，如果没有则弹窗激励视频阅读，如果有缓存对比storage_key的值，大于需要阅读广告，其他不要
							// 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用
							if (that.about_center[0].wx_jili_video != '' && that.detailData.fr_videp_if !=
								'0') {

								if (that.about_center[0].fr_jili_video_record == '1') {
									var frDate = new Date();
									this.frDate = frDate.getUTCFullYear() + (frDate.getMonth() + 1) +
										frDate
										.getDate();
									var posIdInfo = uni.getStorageSync('storage_key' + this.postID);
									if (posIdInfo == '') {
										that.videoAD();
										console.log('缓存为空')
									} else {
										if (posIdInfo < this.frDate) {
											that.videoAD();
											var posIdInfo = uni.getStorageSync('storage_key' + this
												.postID);
											console.log(this.frDate)
										} else {
											console.log('直接阅读全文', this.frDate, posIdInfo)
										}
									}
								} else {
									that.videoAD();
								}

							} else {
								console.log('阅读该文章不需要激励视频广告')
							};

							// 广告加载
							that.CreateAd();
							// 加载留言
							that.XuMessage();

							// 独立文章公告弹窗
							if (that.detailData.pos_notice != '') {
								uni.showModal({
									title: '公告',
									content: that.detailData.pos_notice,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						} else {
							// 关闭加载动画
							that.loginSucc();
						}
					}
				})
			},

			XuMessage: function() {
				var that = this;
				// 获取问题评论留言列表
				uni.request({
					url: API + '/wp-json/wp/v2/comments?post=' + that.posdCenterID + '&page=' + that
						.page,
					success: (res) => {
						that.XuMessageList = that.XuMessageList.concat(res.data);
					}
				});
			},

			// 加载过度
			loginSucc: function() {
				var that = this;
				setTimeout(function() {
					that.is_show_login = false;
				}, 300)

			},

			// 左上角返回按钮
			tarBlack: function() {
				// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
				var selPage = getCurrentPages();
				// console.log(selPage.length)
				if (selPage.length == 1) {
					uni.switchTab({
						url: "../index/index"
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			// 点击跳转
			posTap: function(e) {
				var posId = e.id;
				var password = e.content.protected;
				var akey = e.account_key;
				switch (e.pos_read) {
					case '':
						uni.navigateTo({
							url: '../data/data?id=' + posId + '&password=' + password + '&akey=' + akey
						})
						break;
					case '0':
						uni.navigateTo({
							url: '../data/data?id=' + posId + '&password=' + password + '&akey=' + akey
						})
						break;
					case '1':
						uni.navigateTo({
							url: '../weblist/weblist?aurl=' + e.account_url
						});
						break;
					case '2':
						uni.navigateTo({
							url: '../download/download?id=' + posId + '&password=' + password +
								'&akey=' + akey
						});
						break;
					case '3':
						uni.openChannelsActivity({
							finderUserName: e.wxvideo_id,
							feedId: e.wxvideo_feedid,
							success: (res) => {},
							fail: (err) => {
								console.log(err)
							}
						})
						break;
					case '4':
						const aid = e.bz_video_av
						const timestamp = new Date().getTime()
						const path =
							`pages/video/video?__preload_=${timestamp*10+3}&__key_=${timestamp*10+4}&avid=${aid}`
						wx.navigateToMiniProgram({
							appId: 'wx7564fd5313d24844',
							path,
							success: res => {
								console.log('跳转成功')
							}
						})
						break;
				}
			},


			// 文章标签
			potgsTap: function(e) {
				var that = this;
				var jstag = e;
				uni.navigateTo({
					url: '../category/categ_lisst?jstag=' + jstag
				})
			},

			// 资源点击
			downloadTap: function() {
				var that = this;
				uni.navigateTo({
					url: '../download/download?id=' + that.posdCenterID
				})
			},
			// 流量主视频弹窗
			videoAD: function() {
				var that = this;
				wx.getSystemInfo({
					success: (res) => {
						console.log(res.platform)
						if (res.platform == 'mac' || res.platform == 'windows') {
							uni.showModal({
								title: 'error',
								content: '请使用移动端设备访问',
								success: function(res) {
									that.tarBlack();
								}
							});
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '请您先观看激励视频广告阅读全文',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										that.getVideoAd();
									} else if (res.cancel) {
										console.log('用户点击取消');
										that.tarBlack();
									}
								}
							});
						}
					}
				})
			},

			//初始化激励视频广告组件
			CreateAd: function() {
				var that = this;
				if (that.about_center[0].wx_jili_video != '') {
					if (wx.createRewardedVideoAd) {
						that.videoAd = wx.createRewardedVideoAd({
							adUnitId: that.about_center[0].wx_jili_video
						})
						that.videoAd.onLoad(() => {})
						that.videoAd.onError((err) => {
							console.log(err)
							// 播放错误下发奖励
							that.adCache();
						})
						that.videoAd.onClose((res) => {
							if (res && res.isEnded) {
								uni.showToast({
									icon: 'none',
									title: "感谢您的支持"
								})
								that.adCache();
							} else {
								uni.showToast({
									icon: 'none',
									title: "中途关闭广告"
								})
								that.tarBlack();
							}
						})
					}

				}
			},

			// 激励视频
			getVideoAd: function() {
				let that = this;
				// 用户触发广告后，显示激励视频广告
				if (that.videoAd) {
					that.videoAd.show().catch(() => {
						// 失败重试
						that.videoAd.load()
							.then(() => that.videoAd.show())
							.catch(err => {
								console.log('激励视频', err)
								that.adCache();
							})
					})
				}
			},

			// 点击回到主页那妞
			getIndex: function() {
				uni.switchTab({
					url: "../index/index"
				})
			},

			// 提交问题
			questionsTap: function() {
				var that = this;
				var posId = that.posdCenterID;
				uni.navigateTo({
					url: '../questions/questions?id=' + posId
				})
			},

			// 访问微信文章
			tapWx: function(wx) {
				var that = this;
				var sve = wx;
				uni.navigateTo({
					url: '../weblist/weblist?aurl=' + sve
				})
			},

			// 点击获取链接地址
			// navigate(href, e) {
			// 	uni.setClipboardData({
			// 		data: href,
			// 		success: function() {
			// 			console.log('设置系统剪贴板成功');
			// 			uni.showToast({
			// 				title: '复制成功啦',
			// 				duration: 1500
			// 			});
			// 		},
			// 		fail: function() {
			// 			console.log('设置系统剪贴板失败');
			// 			uni.showToast({
			// 				title: '复制失败咯',
			// 				duration: 1500
			// 			});
			// 		}
			// 	});
			// },

			// 数据缓存
			adCache() {
				uni.setStorage({
					key: 'storage_key' + this.postID,
					data: this.frDate,
					success: () => {
						console.log('成功缓存：storage_key' + this.postID);
					}
				});
			}
		}
	}
</script>

<style>
	/* 关注微信公众号 */
	.que-user-red {
		color: red;
	}

	.account-aout {
		margin-left: 30rpx;
	}

	.account-btn {
		height: 60upx;
		background-color: #1c262a;
		border-radius: 200upx;
		font-size: 24upx;
		width: 150upx;
		color: #FFFFFF;
		flex-shrink: 0;
		margin-right: 0upx;
	}

	.account-describe {
		font-size: 20upx;
		color: #7c7c7c;
	}

	.account-img {
		height: 80upx;
		width: 80upx;
		border-radius: 200upx;
		overflow: hidden;
	}

	.account-flex {
		display: flex;
	}

	.account-view {
		background-color: #f9f9f9;
		border-radius: 20upx;
		height: 120upx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18upx 30rpx;
	}

	/* 密码访问 */
	.password-title {
		margin: 20upx 0;
		font-weight: bold;
		font-size: 36upx;
		text-align: center;
	}

	.password-desrc {
		width: 70%;
		margin: auto;
		text-align: center;
		font-size: 28upx;
		color: #929292;
	}

	.password-position {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -60%);
	}

	.password-icon {
		height: 500upx;
		width: 100%;
		overflow: hidden;
	}

	/* .password-btn{
		height: 100upx;
		width: 100upx;
		margin: 40upx auto;
		overflow: hidden;
	} */


	/* 加载动画 */
	.data-login {
		height: 70upx;
		width: 70upx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.data-login-flex {
		position: fixed;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		z-index: 1029;
		background-color: #f7f7f7; //加载动画背景颜色
	}

	/* 提问转发 */
	.cover-list-icon {
		height: 64upx;
		width: 64upx;
		display: block;
		margin: auto;
	}

	.cover-list-btn {
		margin: 0upx;
		padding: 0upx;
		background-color: unset;
		line-height: unset;
	}

	.cover-list-font {
		color: #b2b2b2;
		font-size: 24upx;
		text-align: center;
		/* margin-top: 16upx; */
	}

	.cover-open-right-bot {
		width: 100%;
		height: 100%;
		transform: rotate(180deg);
	}

	.cover-open-right-up {
		width: 100%;
		height: 100%;
	}

	.cover-open-right {
		position: absolute;
		right: 44upx;
		height: 32upx;
		width: 32upx;
	}

	.cover-quest {
		border-radius: 100upx;
		height: 64upx;
		line-height: 64upx;
		width: 24%;
		background-color: #f3f3f3;
		color: #b7b7b7;
		font-size: 24upx;
		padding-left: 40upx;
	}

	.cover-list-view {
		margin-bottom: 28upx;
		height: 110upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
	}

	.cover-h-icon {
		height: 50upx;
		width: 50upx;
		overflow: hidden;
		margin-left: 28upx;
		margin-right: 14upx;
	}

	.cover-view-h {
		margin: 28upx 28upx 0upx 28upx;
		color: #FFFFFF;
		height: 80upx;
		font-size: 28upx;
		display: flex;
		align-items: center;

	}

	.cove-bom {
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		width: 100%;
		z-index: 1025;
		background-color: #fff;
	}

	/* 问题列表 */
	.que-time {
		color: #D5D5D5;
		font-size: 20rpx;
		margin-top: 14upx;
	}

	.que-wen {
		margin-top: 14upx;
		color: #7c7c7c;
		font-size: 28upx;
	}

	.que-name {
		font-size: 26upx;
	}

	.que-text {
		color: #cecccc;
		margin-left: 10upx;
	}

	.que-description {
		margin-left: 20upx;
	}

	.que-user {
		height: 50upx;
		width: 50upx;
		border-radius: 100upx;
		background-color: #00BFFF;
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 50upx;
		text-align: center;
		flex-shrink: 0;
	}

	.que-user-d {
		background-color: #4c8cec !important;
	}

	.que-lisr-v {
		border-radius: 20upx;
		margin: 30upx;
		display: flex;
	}

	/* 评论 */
	.leaving-user-time {
		color: #D5D5D5;
		font-size: 20upx;
	}

	.leaving-user-info {
		margin-left: 20upx;
	}

	.leaving-user-img {
		background-color: #007AFF;
		border-radius: 10upx;
		height: 80upx;
		width: 80upx;
		flex-shrink: 0;
	}

	.leaving-view {
		background-color: #f8f8f8;
		border-radius: 10upx;
		padding: 20upx;
		margin: 30upx;
		display: flex;
	}

	/* me-svg */
	.Vajra-list-font {
		color: #807C7C;
		font-size: 24upx;
		text-align: center;
		margin-top: 16upx;
	}

	.Vajra-list-img {
		height: 60upx;
		width: 60upx;
		overflow: hidden;
		margin: auto;
	}

	.me-sbg-btn {
		/* overflow-y: hidden; */
		justify-content: center;
		align-items: center;
	}

	.me-svg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30upx;
		background-color: #FFFFFF;
		padding: 30upx 0upx 20upx 0upx;
		border-radius: 16upx;
	}

	/* 资源 */
	.list-li-left-describe {
		margin: 30upx 0upx 10upx 0upx;
		font-size: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-li-tag {
		color: #D5D5D5;
		font-size: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 20upx;
	}

	.list-img {
		height: 100upx;
		width: 120upx;
		border-radius: 14upx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-view {
		margin: 30upx;
		background-color: #fff;
		padding: 30upx;
		border-radius: 20upx;
		box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.10);
	}

	.list-li {
		display: flex;
		align-items: center;
		margin: 20upx 0upx;
	}

	/* 没有数据时候 */
	.no-text {
		color: #ADADAD;
		margin-top: 40upx;
		font-size: 30upx;
	}

	.no-img {
		border-radius: 20upx;
		overflow: hidden;
		height: 700upx;
		width: 500upx;
	}

	.no-datalist {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* 列表没有数据 */
	.no-list-data {
		text-align: center;
		margin: 30upx 0px;
		color: #ADADAD;
	}

	/* 列表 */
	.list-li-left-describe {
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #D5D5D5;
		font-size: 20upx;
		display: flex;
		justify-content: space-between;
	}

	.list-li-left-h {
		font-size: 26upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-li-left {
		margin-left: 32upx;
		flex-grow: 1;
		height: 116upx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}

	.list-img {
		height: 100upx;
		width: 120upx;
		border-radius: 14upx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li {
		display: flex;
		margin: 20upx 48upx;
		align-items: center;
		border-radius: 20upx;
	}

	.list-li-toew {
		display: flex;
		margin: 20upx 0upx;
		align-items: center;
		border-radius: 20upx;
		justify-content: space-around;
	}

	.list-icon-list {
		text-align: center;
	}

	.list-icon-list-btn {
		text-align: center;
		margin: 0;
		background-color: unset;
		padding: 0;
	}

	.list-icon-list-img {
		height: 60upx;
		width: 60upx;
		overflow: hidden;

	}

	.list-icon-list-img-title {
		font-size: 22upx;
		color: #b1b1b1;
		margin-top: 12upx;
	}

	.list-li-toew-ma {
		margin: 40upx 0upx 20upx 0upx;
	}

	/* 标题 */
	.title-h-ad {
		height: 240upx;
		border-radius: 16upx;
		margin: 48upx;
		overflow: hidden;
	}

	.titel-felx {
		display: flex;
		align-items: center;
		padding: 28upx;
		border-radius: 20upx;
	}

	.titel-h-go {
		font-size: 32upx;
		margin-left: 20upx;
	}

	/* 金刚区域 */
	.district-poster {
		width: 220upx;
		height: 60upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, rgba(67, 130, 235, 1) 0%, rgba(6, 189, 254, 1) 100%);
		text-align: center;
		line-height: 64upx;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0upx 20upx;
		box-shadow: #4284ec 0upx 4upx 12upx;
	}

	.district-fenrid {
		width: 220upx;
		height: 60upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, #F86168, #FFC6D3 100%);
		text-align: center;
		line-height: 64upx;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0upx 20upx;
		box-shadow: #F86168 0upx 4upx 12upx;
	}

	.district-money {
		width: 220upx;
		height: 60upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, rgba(12, 185, 162, 1) 0%, rgba(15, 236, 210, 1) 100%);
		text-align: center;
		line-height: 64upx;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0upx 20upx;
		box-shadow: #0bbda6 0upx 4upx 12upx;
	}

	.district-fabulous {
		width: 180upx;
		height: 60upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, rgba(248, 97, 104, 1) 0%, rgba(255, 198, 211, 1) 100%);
		text-align: center;
		line-height: 64upx;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0upx 16upx;
		box-shadow: #f96a71 0upx 6upx 22upx;
	}

	.district {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 评语 */
	.span-color {
		color: red;
	}

	.review {
		background-color: #f9f9f9;
		padding: 32upx;
		margin: 20upx 30upx;
		border-radius: 10upx;
		color: #807C7C;
		font-size: 24upx;
	}

	/* 正文内容 */
	.data-font {
		margin-top: 40upx;
	}

	.data-h:after {
		content: '';
		position: absolute;
		bottom: -14upx;
		left: 0px;
		width: 96upx;
		height: 8upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}

	.data-h {
		color: #000000;
		font-size: 32upx;
		position: relative;
	}

	.data-img {
		border-radius: 10upx;
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 30upx 0upx;
	}

	.data-view {
		margin: 20upx 20upx;
		font-size: 34upx;
		color: #333232;
		line-height: 60upx; //文字行高
		word-wrap:break-word;
	}

	/* 时间和浏览量 */

	.time-le {
		margin-left: 20upx;
	}

	.ma-left-20 {
		margin-left: 20upx;
	}

	.time-font-2 {
		background-color: #796bf7;
		color: #FFFFFF;
		font-size: 24upx;
		border-radius: 10upx;
		padding: 4upx 20upx;
		margin-left: 10upx;
	}

	.time-font {
		font-weight: 400;
		font-size: 24upx;
		color: rgba(124, 124, 124, 1);
		margin-left: 10upx;
	}

	.time-img {
		height: 40upx;
		width: 40upx;
	}

	.time-view {
		margin: 30upx 28upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	/* 标题 */
	.tar-w-h {
		color: #000000;
	}

	.titel-h {
		font-size: 42upx;
		font-weight: bold;
	}

	.titel-view {
		width: 180upx;
		flex-shrink: 0;
	}

	.titel-h-w {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 70upx 30upx 0upx 30upx;
		flex-grow: 1;
	}

	.top-img {
		height: 500upx;
		width: 100%;
	}

	/* 背景图片 */
	.fengrui-img-tar {
		height: 40upx;
		width: 40upx;
	}

	.square-black-img {
		height: 40upx;
		width: 40upx;
		margin-top: 10upx;
	}

	.square-black {
		position: fixed;
		left: 28upx;
		background: rgba(255, 255, 255, 0.5);
		height: 55upx;
		z-index: 2;
		width: 100upx;
		border-radius: 100upx;
		top: 0upx;
		text-align: center;
	}

	.back-radius {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60upx;
		width: 100%;
		border-radius: 40upx 40upx 0upx 0upx;
		background: #FFFFFF;
		z-index: 2;
	}

	.back-img {
		overflow: hidden;
		position: relative;
		background-color: #3482e2;
		border-radius: 0upx 0upx 40upx 40upx;
		padding-bottom: 20upx;
		height: 20upx;
	}

	.fengrui {
		height: 100%;
		width: 100%;
	}

	/* 自定义标题栏 */
	.tar-img {
		margin-left: 28upx;
		height: 48upx;
		width: 48upx;
		overflow: hidden;
	}

	.tar-t {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tar-w {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999999999;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	.fengrui1-img {
		margin-left: 20rpx;

		height: 100%;
		width: 100%;
	}

	.index-ov {
		/* overflow-x: hidden; */
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);

	}

	/* 富文本解析视频宽度 */
	.video {
		width: 100% !important;
	}


	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex {
			background: #161616;
		}

		.back-radius {
			background: #161616;
		}

		.tar-w {
			background: #161616;
		}

		.tar-t,
		.cover-quest {
			background: #161616;
		}

		.data-h {
			color: #d7d7d7;
		}

		.data-view {
			color: #d7d7d7 !important;
		}

		.me-svg,
		.cove-bom {
			background: #202020;
		}

		.list-view {
			background: #202020;
		}

		.time-font {
			color: rgba(124, 124, 124, 1);
		}

		.fengrui-img-tar {
			color: rgba(201, 201, 201, 1);
		}

		.square-black-img {
			color: rgba(201, 201, 201, 1);
		}

		.tar-w-h {
			color: rgba(201, 201, 201, 1);
		}
	}
</style>
